html,body{
    font-family: "PingFang SC", miui, system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
    margin:0px;
    padding:0px;
    background: #fff;
    color: #333;
}
.hide{
    display: none;
}
#app{
    text-align: center;
    padding-top: 25vw;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.icon{
    display: inline-block;
    background-position: center;
    background-size: cover;
    background-repeat:  no-repeat;
}

.icon-error{
    background-image: url(assets/icon-error.png);
    width: 10vw;
    height: 10vw;
}

.icon-logo{
    background-image: url(assets/logo.png);
    width: 30vw;
    height: 30vw;
}

.text{
    color: #444;
    width: 80vw;
    font-size: 4vw;
    margin: 5vw auto;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}

.text.left{
    text-align: left;
}

.actions{

}

.actions a{
    display: block;
    width: 50vw;
    margin: 10vw auto;
    color: #fff;
    background: #08c;
    border-radius: 1vw;
    padding: 3vw;
    font-size: 4vw;
    text-decoration: none;
}

input{
    border: 1px solid #aaa;
    width: 80vw;
    line-height: 1.8em;
    font-size: 4.5vw;
    padding: 2vw 4vw;
}

.landscape #app{
    padding-top: 20px;
}

.landscape  .icon-error{
    width: 60px;
    height: 60px;
}

.landscape .icon-logo{
    width: 60px;
    height: 60px;
}

.landscape .text{
    width: 90vw;
    font-size: 16px;
    margin: 6px auto;
}


.landscape .actions a{
    width: 300px;
    margin: 20px auto;
    border-radius: 5px;
    padding: 8px;
    font-size: 18px;
}

.landscape input{
    width: 300px;
    font-size: 18px;
    padding: 10px 1em;
}

#active-wrap{
    text-align: center;
    margin-top: 35vw;
    padding: 0vw;
}

#active-wrap .qr{
    width: 40vw;
    height: 40vw;
    display: inline-block;
}

#active-wrap .qr canvas{
    max-width: 100%;
    max-height: 100%;
}

#active-wrap .text{
    color: #666;
    font-size: 4vw;
    text-align: center;
    margin-top: 10vw;
    line-height: 1.8em;
}